<template>
  <div class="hello">

    <ul>

      <li index="2">
        <router-link :to="{path:'/Details' , query:{ id:corsfire}}">店铺首页</router-link>
      </li>
      <!--<li index="3"><router-link to="/Home">店铺介绍</router-link></li>-->
      <!--<li index="4"><router-link to="/Home">全部商品</router-link></li>-->
      <!--<li index="5"><router-link to="/Home">客户反馈</router-link></li>-->
      <li index="6">
        <router-link :to="{path:'/Storeinfo',query:{ id:corsfire}}">联系我们</router-link>
      </li>
      <li :index="3">
        <router-link to="/Home">商城首页</router-link>
      </li>
    </ul>
  </div>
</template>

<script>

  export default {
    props: ['massage', 'shops'],
    data () {
      return {
        activeIndex: '1',
        corsfire: ''
      }
    },
    methods: {
      handleSelect (key, keyPath) {
        console.log(key, keyPath)
      },
      getQueryString (name) {
        var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)')
        var r = window.location.href.split('?')[1].match(reg)
        if (r != null) {
          return decodeURI(r[2])
        }
        return null
      }
    },
    mounted () {
      this.corsfire = this.$route.query.id
    }
  }
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .hello {
    width: 100%;
    height: 36px;
    margin: 0 auto;
    background: #ff8328;
  }

  ul {
    width: 100%;
    height: 100%;
    line-height: 36px;

  }

  ul li {
    float: left;
    width:196px;
    height:100%;

  }

  ul li:nth-child(1) {
    /*padding: 0 60px;*/
  }

  ul li a {
    color: #ffffff;
    display: inline-block;
    width:100%;
    height:100%;
  }

  ul li:hover {
    background: #ff7108;
  }

  .active {
    background: #ff7108;
  }
</style>


